<template>
  <div>
    <div class="match-question">
      <div class="match-question-search">
        <input type="text" placeholder="请输入要查询的问题"  v-model="keyword"/>
        <button @click="searchkeyword()">提交</button>
      </div>
      <div class="match-question-box">
          <tabs v-model="activeName" @tab-click="handleClick">
            <tab-pane label="常见问题" name="first">
              <ul class="match-question-list">
                <li v-for="quest, index in changjianwentilist" :key="index">
                  <div class="question-box"><i>问</i><div>{{ quest.title}}</div></div>
                  <div class="answer-box"><i>答</i><div>{{ quest.content }}</div></div>
                </li>
              </ul>
            </tab-pane>
<!--            <tab-pane label="评审及奖励" name="second">-->
<!--              <ul class="match-question-list">-->
<!--                <li v-for="quest, index in question2" :key="index">-->
<!--                  <div class="question-box"><i>问</i><div>{{ quest.question}}</div></div>-->
<!--                  <div class="answer-box"><i>答</i><div>{{ quest.answer }}</div></div>-->
<!--                </li>-->
<!--              </ul>-->
<!--            </tab-pane>-->
<!--            <tab-pane label="报名系统" name="third" style="display: none">-->
<!--              <ul class="match-question-list">-->
<!--                <li v-for="quest, index in question3" :key="index">-->
<!--                  <div class="question-box"><i>问</i><div>{{ quest.question}}</div></div>-->
<!--                  <div class="answer-box"><i>答</i><div>{{ quest.answer }}</div></div>-->
<!--                </li>-->
<!--              </ul>-->
<!--            </tab-pane>-->
          </tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { Tabs, TabPane } from "element-ui";
import {changjianwenti} from '../../api/cms.js';

export default {
  components: {
    Tabs, TabPane
  },
  data() {
    return {
      activeName: 'first',
      changjianwentilist:{},
      keyword:'',
      question1: [{
        question: '参赛项目在报名时如何选择？',
        answer: '本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次' + 
        '大赛奖励大赛设置大赛设置的本次大赛设本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的置的内本次大赛设大赛设置的'
      },{
        question: '参赛项目在报名时如何选择？',
        answer: '本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次' + 
        '大赛奖励大赛设置大赛设置的本次大赛设本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的置的内本次大赛设大赛设置的'
      },{
        question: '参赛项目在报名时如何选择？',
        answer: '本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次' + 
        '大赛奖励大赛设置大赛设置的本次大赛设本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的置的内本次大赛设大赛设置的'
      },{
        question: '参赛项目在报名时如何选择？',
        answer: '本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次' + 
        '大赛奖励大赛设置大赛设置的本次大赛设本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的置的内本次大赛设大赛设置的'
      }],
      question2: [{
        question: '评审及奖励',
        answer: '本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次' + 
        '大赛奖励大赛设置大赛设置的本次大赛设本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的置的内本次大赛设大赛设置的'
      },{
        question: '参赛项目在报名时如何选择？',
        answer: '本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次' + 
        '大赛奖励大赛设置大赛设置的本次大赛设本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的置的内本次大赛设大赛设置的'
      },{
        question: '参赛项目在报名时如何选择？',
        answer: '本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次' + 
        '大赛奖励大赛设置大赛设置的本次大赛设本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的置的内本次大赛设大赛设置的'
      },{
        question: '参赛项目在报名时如何选择？',
        answer: '本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次' + 
        '大赛奖励大赛设置大赛设置的本次大赛设本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的置的内本次大赛设大赛设置的'
      }],
      question3: [{
        question: '报名系统',
        answer: '本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次' + 
        '大赛奖励大赛设置大赛设置的本次大赛设本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的置的内本次大赛设大赛设置的'
      },{
        question: '参赛项目在报名时如何选择？',
        answer: '本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次' + 
        '大赛奖励大赛设置大赛设置的本次大赛设本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的置的内本次大赛设大赛设置的'
      },{
        question: '参赛项目在报名时如何选择？',
        answer: '本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次' + 
        '大赛奖励大赛设置大赛设置的本次大赛设本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的置的内本次大赛设大赛设置的'
      },{
        question: '参赛项目在报名时如何选择？',
        answer: '本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次' + 
        '大赛奖励大赛设置大赛设置的本次大赛设本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的本次大赛设置的内容，本次大赛设置的置的内本次大赛设大赛设置的'
      }]
    };
  },
  created() {
    this.getList('');
  },
  methods: {
    handleClick () {

    },
    searchkeyword(){
      this.getList(this.keyword);
    },
    getList(keyword){
      changjianwenti({keyword:keyword}).then(res => {
         this.changjianwentilist = res.data.data.rows;
        // this.hezuomeiti = res.data.data.hezuomeiti;
        // this.zhichihuoban = res.data.data.zhichihuoban;

      }).catch(res => {
        console.log(res);
      });
    }
  }
};
</script>

<style>
.match-question-search {
  display: flex;
  width: 1026px;
  height: 64px;
  margin: 50px auto 60px;
}
.match-question-search input {
  appearance: none;
  background-color: rgb(255, 255, 255);
  flex: 1;
  height: 64px;
  display: inline-block;
  border: none;
  padding-left: 10px;
  outline: 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.match-question-search button {
  outline: 0;
  display: inline-block;
  appearance: none;
  background-color: rgb(1, 67, 160);
  width: 158px;
  height: 64px;
  color: #fff;
  border: none;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.match-question-box {
  margin: 0 auto;
  border-radius: 25px;
  background-color: rgb(255, 255, 255);
  box-shadow: 2.5px 4.33px 25px 0px rgb(0, 0, 0, 0.2);
  width: 1240px;
  height: 914px;
  padding: 46px 110px;
}
.question-box, .answer-box {
  display: flex;
}
.question-box div, .answer-box div {
  flex: 1;
  font-size: 16px;
  color: #3b3b3b;
  line-height: 26px;
}
.question-box {
  margin-bottom: 20px;
}
.question-box i, .answer-box i {
  margin-right: 10px;
  display: inline-block;
  width: 26px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  border-radius: 50%;
  font-size: 14px;
  font-style: normal;
}
.question-box i {
  background-color: #0143a0;
  color: #fff;
}
.answer-box i {
  border: 1px solid #0143a0;
  color: #0143a0;
}
.match-question-list {
  padding-top: 14px;
}
.match-question-list li {
  padding: 36px 0 30px;
  border-bottom: 1px solid #d9d9d9;
}
.match-question-list li:last-child {
  border-bottom: none;
}
.match-question-box .el-tabs__item {
  font-size: 16px;
  color: #000;
  margin-bottom: 20px;
}
.match-question-box .el-tabs__active-bar {
  background-color: #0143a0;
  width: 68px;
  height: 4px;
}
</style>